前言

開賽啦！這是我第二次參加鐵人賽，去年的傳送門在這裡 Javascript 從寫對到寫好，主要寫了一些自己四五年來的 coding 經驗，該如何讓自己從單純完成任務寫「對」的 code，到更好讀、更好維護，寫「好」的 code，歡迎有興趣的人可以去看看！

去年鐵人賽的經驗很棒，雖然過程中真的是每天數饅頭想放棄，但因為每天都有隊友加油打氣，以及看到留言區有一些討論與問答，就覺得這樣的成果應該也是有幫到一點忙的！成就感滿滿～

因此今年，我又來啦！

前端技能樹

今年的主題圍繞在前端技能樹，大家是不是看過類似這樣的圖呢？

(來源: roadmap.sh)

小時候的我(大概三年前)，還是個前端新手村出來的菜鳥，看到類似這種技能樹，都會各種恐懼與害怕，因為整張圖我大概只會 HTML、CSS、JavaScript，而且還只是一點皮毛能應付初階工作需求而已，更不用說它們衍伸出的細項與下方那龐大的分支。

即便到了現在，看到這種樹狀圖我更怕了

啊怎麼比三年前還大棵...

我深深能夠體會新聞常在說的：「薪水趕不上物價」

因為我這一刻也感受到：「實力趕不上技能樹的生長力」

我是會用 webpack 啦，但它旁邊的 esbuild、Rollup 我真的不太熟...
React 我熟啊，可是它底下的 Next.js 我卻完全沒用過...

但不同的是，這次我經驗比較豐富了，樹上的技能多多少少碰了一些，即便沒碰過的，也大概聽說與知道。想了一下，不用真的到每個技能都熟練，弱水三千，其實更重要的是手上的這一瓢，最起碼用過的技術，我要有個基礎的理解。

小時候玩電腦遊戲，因為選擇不多，往往會將手上的遊戲玩得非常透徹，還會集資買本「攻略本」來翻，找到寶物在什麼位置，比較兩把武器如何選擇，討論屬性相剋等。

因此我今年的主題就誕生了！

十萬個為什麼

我想要好好去理解，我實際碰過的這些技能，不過重點不會放在「怎麼寫」，而會放在「為什麼要用」，讓這系列 30 天文章，最後可以匯集成像是 「攻略本」 一樣，每當我在前端工作卡關的時候，可以回頭來翻什麼工具適合什麼情境，為什麼用這個而不是那個。

以前看過的 十萬個為什麼 是很有趣的科普影片，會告訴我「水溝蓋為什麼要做成圓形？」、「輪胎為什麼要有紋路？」，這些我們現在習以為常的事物，可能都沒去想過為什麼，只是默默就接受了

水溝蓋本來就圓的啊！
輪胎怎麼可能沒胎紋！

類比到以前我學前端的技能時，也很類似：

寫前端本來就一定要框架的啊！沒人在用 jQuery 了啦！
webpack 是必備的吧！框架怎麼可能沒 webpack！

但仔細想想

• 輪胎不能沒有胎紋嗎？
• 沒有胎紋會有什麼麻煩？
• 有胎紋比沒胎紋更適合什麼情境？

若真要把這些細節攤出來，可能很多人還真沒想過，只是因為大家都這樣做，就跟著走了。

雖然以學習的角度來說，先學會怎麼用，並且實際產出，是更有成就感的，但如果能夠回頭分析理解，為什麼要用這個工具，對於未來自己要下決策的時候，會是很棒的鍛鍊！

關於系列文

與去年環環相扣，一樣是為了寫出「好」的 code，只是更著重於對一些 library 與 framework 的理解，比較出什麼情境該用什麼工具，優勢與缺點是什麼。

因此，文章中會不斷出現下列句型：

• A 是在什麼樣的時代誕生的？
• A 怎麼解決問題？
• A 的優缺點是什麼？
• A 適合什麼情境？
• 為什麼要用 A？
• 為什麼不用 B？
• A 跟 B 差在哪？

(A 跟 B 可以自行帶入你最近在使用的技術)

另外，因為我主要使用 React 框架與其生態系，所以可能會比較聚焦在 React，其他框架的讀者也可以看過之後想想，自己的生態系內有沒有對應的工具囉！

這系列的文章「不會」有：

• 工具與框架的詳解與細節設定
• 語法探討或手把手專案
• 滿滿的 code

這系列的文章「會」有：

• 工具與框架誕生的原因與脈絡
• 相關工具的優缺點比較
• 使用工具的情境與適合時機

結語

找到每個為什麼，在下一個抉擇點，做出最好的決定！